import { Link, Warning } from '@brillout/docpress'
import { ClientOnlyCommon } from './ClientOnlyCommon.tsx'
import { UiFrameworkExtension } from '../../components'

Implemented by: <UiFrameworkExtension /> (or <Link href="#without-vike-react-vue-solid">yourself</Link>).

The `<ClientOnly>` wrapper enables you to render and load a component only on the client-side.

> Alternatively, you can set <Link href="/ssr">`ssr: false`</Link> to render and load the entire page only on the client-side.

Common use cases:

 - **Library components that don't support SSR**. A solution is to render and load the component only on the client-side.
   > Most component libraries nowadays support SSR but some don't. Some even crash when they're merely loaded on the server-side (for example if the library has a hard reference to browser-only APIs/objects such as `window`).
 - **Performance**. `<ClientOnly>` allows you to defer loading heavy components, such as a complex interactive map. That way, your users can already interact with your page before even the browser starts loading that heavy component.
   > Vite code-splits dynamic imports such as `const { SomeComponent } = await import('./SomeComponent')`. In other words, the code of `<SomeComponent />` isn't included in the initial JavaScript client bundle: it's loaded only when/if `import()` is called.


## React

<ClientOnlyCommon packageName="vike-react" />

## Solid

<Warning>The `<ClientOnly>` wrapper is deprecated, use <Link href="/clientOnly#solid">the `clientOnly()` helper</Link> instead.</Warning>

<ClientOnlyCommon packageName="vike-solid" />

## Vue

<Warning>The `<ClientOnly>` wrapper is deprecated, use <Link href="/clientOnly#vue">the `clientOnly()` helper</Link> instead.</Warning>

<ClientOnlyCommon packageName="vike-vue" />

## Without `vike-{react,vue,solid}`

If you don't use a <UiFrameworkExtension />, you can implement the `<ClientOnly>` wrapper yourself.

See, for example, the source code at:
 - [GitHub > `vikejs/vike-react`](https://github.com/vikejs/vike-react)
 - [GitHub > `vikejs/vike-vue`](https://github.com/vikejs/vike-vue)
 - [GitHub > `vikejs/vike-solid`](https://github.com/vikejs/vike-solid)


## See also

- <Link href="/clientOnly" />
